<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<style>
    .item1 {
        grid-area: header;
    }

    .item2 {
        grid-area: menu;
    }

    .item3 {
        grid-area: main;
    }


    .grid-container {
        display: grid;
        grid:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
    }

    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }
</style>
<div class="background-color:red;">
    <div class="grid-container">
        <div class="item1">头部</div>
        <div class="item2">
            <ul id="menu">
            </ul>
        </div>
        <div class="item3">主要内容区域</div>
    </div>
</div>
<script>
    //当前登陆后的用户的id
    let id = sessionStorage.getItem("userid");
    let data = {
        code: 200, msg: 'success', data: [
            {id: 1, username: 'admin', password: '123456'},
            {id: 2, username: 'admin', password: '123456'},
            {id: 3, username: 'admin', password: '123456'},
            {id: 4, username: 'admin', password: '123456'},
            {id: 5, username: 'admin', password: '123456'}
        ]
    };
    // 15.6 - 23.4
    let menu = document.getElementById("menu");

    for (let i = 0 ;i < data.data.length;i++){
        let li = document.createElement("li");
        li.innerHTML ="<a href=''>"+data.data[i].username+"</a>";
        menu.appendChild(li);
    }
    menu.appendChild()

// homework : html + css + js
// Node.js + vue3 + vite + elementplus + andtdesign + axios + pinia
// vscode (安装)
//Node.js(安装 )
</script>
</body>
</html>